$(function () {
  var form = layui.form;
  // 1.获取id
  var id = localStorage.getItem("edit_id");
  // 1. 初始化图片裁剪器
  var $image = $("#image");

  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: ".img-preview",
  };

  // 3. 初始化裁剪区域
  $image.cropper(options);

  initCate(); //这里调用获取文章列表的函数方法

  // 2.获取文章分类
  function initCate() {
    $.ajax({
      url: "/my/article/cates", //获取文章分类列表
      success: function (res) {
        if (res.status !== 0) return layer.msg("初始化文章分类列表失败");
        //获取成功 利用模板引擎 渲染到页面
        var strHtml = template("tpl-cate", res); //模板引擎
        $("[name=cate_id]").html(strHtml); //利用属性选择器 选中html替换为模板引擎
        // 一定要记得调用 form.render() 方法
        // 是告诉layui 重新渲染一下下拉表单
        layui.form.render();
        getInfoById();
      },
    });
  }

  // 3.根据id 获取文章内容
  function getInfoById() {
    $.ajax({
      url: "/my/article/" + id,
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) return layui.layer.msg(res.message);
        //获取文章详情成功,将数据展示到界面中 form.val 方法
        layui.form.val("form-edit", res.data); //快速给表单赋值
        // 初始化富文本编辑器
        initEditor();
        // 回显图片
        $image
          .cropper("destroy") // 销毁旧的裁剪区域
          .attr(
            "src",
            "http://api-breakingnews-web.itheima.net" + res.data.cover_img
          ) // 重新设置图片路径
          .cropper(options); // 重新初始化裁剪区域
      },
    });
  }

  //4.给发布封面注册点击事件
  $("#btnChooseImage").on("click", function () {
    $("#coverFile").click(); //点击点击事件封面时候 让隐藏域触发
  });

  //4.1.给上传文件注册监听事件
  $("#coverFile").on("change", function (e) {
    //4.2拿到用户上传的文件
    var file = e.target.files[0];
    //判断用户是否选择了文件 length===0 则是没有 提示
    if (file === 0) return layer.msg("请上传文件");
    //4.3根据选择的文件，创建一个对应的 URL 地址
    var newImgURL = URL.createObjectURL(file);
    //4.4先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", newImgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });

  // 5. 发布 跟草稿部分
  // 5.1 声明一个变量 为已发布状态
  var art_state = "已发布";
  // 5.2 给 存为草稿 按钮 注册点击事件
  $("#btnSave2").on("click", function () {
    //5.3 点击之后就让他的状态为 草稿
    art_state = "草稿";
  });

  // 6. 为表单注册submit 表单提交事件
  $(".form-edit").on("submit", function (e) {
    e.preventDefault(); //阻止默认事件

    //基于form表单 快速创建FormData()对象
    //6.1 因为传参需要(FormData 格式)  new一个formdata
    var fd = new FormData($(this)[0]);

    //  6.2 把存的  文章发布状态 添加到Formdata 里面
    fd.append("state", art_state);

    //把id 添加进去fd 传参需要
    fd.append("Id", id);

    fd.forEach(function (v, k) {
      console.log(k, v); //打印这个 就是获取到了 传参的值
    });

    // 6.3还剩一个参数 就是封面图片
    // 将封面裁剪过后的图片，输出为一个文件对象
    $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // -------------------
        // 6.4将文件对象，存储到 fd 中
        fd.append("cover_img", blob);
        // 6.5 发起ajax 请求 在下面定义一个函数 把fd传参进去
        publishArticle(fd);
      });
  });

  function publishArticle(fd) {
    $.ajax({
      type: "POST",
      url: "/my/article/edit",
      data: fd,
      // 注意：如果向服务器提交的是 FormData 格式的数据，
      // 必须添加以下两个配置项
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res);
        if (res.status !== 0) return layer.msg(res.message);
        layui.layer.msg("文章发表成功");
        // 发布成功后 跳转到文章列表页面
        location.href = "/article/art_list.html";
        // /然后让文章列表高亮
        window.parent.activeArtList();
      },
    });
  }
});
